<template>
  <div style="width: 200px;height: 200px">
<!--    <div style="padding-top: 20px">-->
<!--      <m-notification :value="50"></m-notification>-->
<!--    </div>-->
<!--    <div>-->
<!--      <m-notification :value="50" :max="30"></m-notification>-->
<!--    </div>-->
<!--    <m-notification icon="ChatRound" :value="50"></m-notification>-->
    <m-notification :value="50" :disabled="disabled">
      <template #default>
        <m-list @clickItem="clickItem" @clickAction="clickAction" :list="list" :actions="actions"></m-list>
      </template>
    </m-notification>
  </div>
</template>

<script setup lang="ts">
import { list, actions } from './data'
import {ref} from 'vue'
let clickItem = (val: any) => {
  console.log(val)
}
let clickAction = (val: any) => {
  console.log(val)
}

let disabled = ref<boolean>(false)

</script>

<style lang="scss" scoped>

</style>
